import React, { useState } from 'react';
import {
  Modal,
  Form,
  Input,
  Select,
  Rate,
  Row,
  Col,
  Card,
  Statistic,
} from 'antd';
import {
  PlayCircleOutlined,
  ClockCircleOutlined,
  TrophyOutlined,
} from '@ant-design/icons';

const { TextArea } = Input;
const { Option } = Select;

const SongPracticeModal = ({
  visible,
  onCancel,
  onOk,
  selectedSong,
  form,
}) => {
  const [practiceDuration, setPracticeDuration] = useState(30);
  const [selfRating, setSelfRating] = useState(3);

  const handleModalOk = () => {
    form.validateFields().then(values => {
      const practiceData = {
        songId: selectedSong.key,
        songName: selectedSong.name,
        duration: practiceDuration,
        rating: selfRating,
        notes: values.notes || '',
        date: new Date().toISOString().split('T')[0],
        time: new Date().toTimeString().split(' ')[0],
      };

      onOk(practiceData);
    });
  };

  return (
    <Modal
      title={`练习 - ${selectedSong?.name}`}
      visible={visible}
      onOk={handleModalOk}
      onCancel={onCancel}
      width={700}
    >
      {selectedSong && (
        <div>
          <Row gutter={[16, 16]}>
            <Col span={12}>
              <Card title="歌曲信息" size="small">
                <p><strong>艺术家：</strong> {selectedSong.artist}</p>
                <p><strong>分类：</strong> {selectedSong.category}</p>
                <p><strong>难度：</strong> {selectedSong.difficulty}/5</p>
                <p><strong>当前掌握度：</strong> {selectedSong.mastery}%</p>
              </Card>
            </Col>
            <Col span={12}>
              <Card title="练习统计" size="small">
                <Statistic 
                  title="练习次数" 
                  value={selectedSong.practiceCount} 
                  suffix="次"
                  valueStyle={{ color: '#3f8600' }}
                />
                <Statistic 
                  title="平均时长" 
                  value={30} 
                  suffix="分钟"
                  valueStyle={{ color: '#1890ff' }}
                />
              </Card>
            </Col>
          </Row>

          <Card title="本次练习" size="small" style={{ marginTop: 16 }}>
            <Row gutter={16}>
              <Col span={12}>
                <Form.Item
                  label="练习时长(分钟)"
                  name="duration"
                >
                  <Select
                    value={practiceDuration}
                    onChange={setPracticeDuration}
                    placeholder="选择练习时长"
                  >
                    <Option value={15}>15分钟</Option>
                    <Option value={30}>30分钟</Option>
                    <Option value={45}>45分钟</Option>
                    <Option value={60}>60分钟</Option>
                    <Option value={90}>90分钟</Option>
                  </Select>
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  label="自我评价"
                  name="rating"
                >
                  <div>
                    <Rate 
                      value={selfRating} 
                      onChange={setSelfRating}
                      style={{ marginBottom: 8 }}
                    />
                    <div style={{ fontSize: 12, color: '#666' }}>
                      {selfRating === 1 && '很差'}
                      {selfRating === 2 && '较差'}
                      {selfRating === 3 && '一般'}
                      {selfRating === 4 && '较好'}
                      {selfRating === 5 && '很好'}
                    </div>
                  </div>
                </Form.Item>
              </Col>
            </Row>
            <Form.Item
              label="练习笔记"
              name="notes"
            >
              <TextArea 
                rows={4} 
                placeholder="记录本次练习的收获、问题或改进点..."
              />
            </Form.Item>
          </Card>
        </div>
      )}
    </Modal>
  );
};

export default SongPracticeModal; 